<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>已保存的密码</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h2>已保存的密码</h2>

    <!-- 切换添加表单按钮 -->
    <button id="toggle-add-btn" style="position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; padding: 0; font-size: 18px; line-height: 24px; text-align: center;">+</button>

    <!-- 手动添加表单 -->
    <form id="add-form">
      <input type="text" id="url" placeholder="网站地址（如 https://example.com）" required>
      <input type="text" id="username" placeholder="用户名" required>
      <input type="password" id="password" placeholder="密码" required>
      <button type="submit">添加</button>
    </form>

    <!-- 清除全部按钮 -->
    <button id="clear-all" style="margin-top: 10px; width: 100%;">清除全部</button>

    <!-- 添加新的表单填充按钮 -->
    <button id="fillFormBtn" style="margin-top: 10px; width: 100%; background-color: #4CAF50; border: none; color: white; padding: 10px 15px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; cursor: pointer; border-radius: 4px;">填充表单</button>

    <!-- 密码列表容器，支持滚动 -->
    <div class="password-list-container">
      <ul id="password-list">
        <!-- 密码条目将通过 popup.js 动态插入 -->
      </ul>
    </div>
  </div>
  <script src="popup.js"></script>
</body>
</html>